<template>
<div class="person">
  <h2>需求 :  当水温达到60度,或者水位达到80cm 就发请求</h2>
  <h2 >当前水温:{{ Temp }}℃</h2>
  <h2 >当前水温:{{ Height }}cm</h2>
  <button @click="changeTemp">水温+10</button>
  <button @click="changeHeight">水位+10</button>
</div>
</template>
<script setup lang="ts" name="person">
import {ref,reactive, computed,watch, watchEffect} from 'vue'
let Temp =  ref(10)
let Height =  ref(0)

// 方法
const changeTemp =()=>{
  Temp.value += 10
}
const changeHeight =()=>{
  Height.value += 10
}
// watch 实现
// 监视
// watch([Temp,Height],(value)=>{
// 从事value中拿到最新的值
  // const [newTemp, newHeight] = value
    // 逻辑
  // if (newTemp >= 60 || newHeight >= 80){
    // console.log("POST");
    
  // }
// })

// 监视- -watchEffect实现
// 实际上是全自动的监视
watchEffect(()=>{
  if(Temp.value >= 60 || Height.value >= 80){
console.log('POST');

  }
})
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
